<!-- 联系客服 -->
<template>
  <div class="customer-service">
    <!-- 联系客服 -->
    <el-card>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="QQ客服" name="1">
          <div>
            <a href="tencent://message/?uin=3290527697&amp;Site=11&amp;Menu=yes" target="blank">
              <img src="../../assets/qq_online.jpg" style="vertical-align: middle">QQ客服1
            </a>
          </div>
          <div>
            <a href="tencent://message/?uin=2080095442&amp;Site=11&amp;Menu=yes" target="blank">
              <img src="../../assets/qq_online.jpg" style="vertical-align: middle">QQ客服2
            </a>
          </div>
        </el-collapse-item>
        <el-collapse-item title="客服热线" name="2">
          <div>021-50120179</div>
          <div>50120189</div>
          <div>50890789</div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
// import {
//   ElCard,
//   ElCollapse,
//   ElCollapseItem
// } from '@eui'
export default {
  // components: {
  //   ElCard,
  //   ElCollapse,
  //   ElCollapseItem
  // },
  data () {
    return {
      activeNames: ['1', '2']
    }
  }
}
</script>

<style lang="less">
  .customer-service{
    position: fixed;
    z-index: 99999;
    width: 120px;
    right: 0;
    top: 10%;
    border-radius: 4px;
    /deep/ .el-card{
      background-color: #ffffff82 !important;
      .el-collapse-item__header{
        height: 38px !important;
        line-height: 38px !important;
        background-color: transparent !important;
      }
      .el-collapse-item__wrap{
        background-color: transparent !important;
      }
      .el-collapse-item__arrow{
        line-height: 38px !important;
      }
      .el-collapse-item__content{
        padding-bottom: 10px !important;
      }
    }
  }
</style>
